<template>
  <div style="display:inline;">
    <div class="comparison com-l">
      <el-tag
        style="margin-right:10px; borderColor:#C0C4CC; color:#606266"
        effect="plain"
      >
        {{
          gisForm &&
            mncList.find(item => {
              return item.value == gisForm.mnc
            }).label
        }}
      </el-tag>
    </div>

    <div class="comparison com-r">
      <el-tag
        v-if="rMncList.length == 1"
        style="margin-right:10px; borderColor:#C0C4CC; color:#606266"
        effect="plain"
      >
        {{
          rMncList.find(item => {
            return item.value == rMnc
          }).label
        }}
      </el-tag>

      <div v-if="rMncList.length > 1">
        <el-select
          style="width:75px;margin-right:10px;"
          size="mini"
          v-model="rMnc"
        >
          <el-option
            v-for="item in rMncList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <el-select
        v-if="routeAreaType != 5"
        class="tag-select-info"
        style="width:100px"
        v-model="rMonth"
        size="mini"
      >
        <el-option
          v-for="(item, index) in monthList"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState, createNamespacedHelpers } from 'vuex'
const {
  mapState: mapStateForm,
  mapMutations: mapMutationsForm,
  mapActions: mapActionsForm
} = createNamespacedHelpers('gisForm')
export default {
  name: 'Comparison',
  computed: {
    ...mapState(['home', 'gisForm']),
    // ...mapGetters(['formData'])
    ...mapStateForm([
      'compare',
      'mncList', // 运营商可选列表
      'rMncList', // 右侧运营商可选列表
      'monthList', //月份列表
      'routeAreaType'
    ]),
    // 右侧运营商
    rMnc: {
      get() {
        return this.gisForm.rMnc
      },
      set(nv) {
        this.setRMnc(nv)
      }
    },
    // 右侧月份
    rMonth: {
      get() {
        return this.gisForm.rMonth
      },
      set(nv) {
        this.setRMonth(nv)
      }
    }
  },
  data: () => ({}),
  watch: {},
  created() {
    this.setRMncList()
    this.rMnc = this.rMncList[0].value
  },
  methods: {
    ...mapMutationsForm(['setRMnc', 'setRMonth', 'setRMncList'])
  }
}
</script>

<style lang="scss" scoped>
.comparison {
  position: fixed;
  top: 130px;
  display: flex;
}
.com-l {
  top: 145px;
  left: 85px;
  span {
    width: 60px;
  }
}
.com-r {
  top: 145px;
  left: calc(50% + 70px);
}

.info-tag {
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #909399;
  cursor: pointer;
  font-size: 12px;
  border-radius: 3px;
  padding: 5px 15px;
}
</style>
